<template>
	<view class="">
		<view class="modal-box " :class="[isVisibility?'show':'', buttom?'bottom-modal':'' ]" @tap="ClickMaskClose" @touchmove.stop.prevent="moveHandleStop">
			<!-- 默认弹窗 -->
			<view class="dialog" v-if="!buttom" @tap.stop="contentClick">
				<view :class="contentClass">
					<slot></slot>
				</view>
				<view class="simple-bar has-bordert" v-if="showConfirmButton == true || showCancelButton == true">
					<view class='action has-mg-0 flex-sub text-green' v-if="showCancelButton == true" @tap.stop='handleClose'>{{cancelButtonText}}</view>
					<view class='action has-mg-0 flex-sub has-borderl' v-if="showConfirmButton == true" @tap.stop='handleConfirm'>{{confirmButtonText}}</view>
				</view>
			</view>
			
			<!-- 底部弹窗 -->
			<view class="dialog" v-if="buttom" @tap.stop="contentClick">
				<view class="simple-bar has-bordert" v-if="showConfirmButton == true || showCancelButton == true">
					<view class='action is-black' v-if="showCancelButton == true" @tap.stop='handleClose'>{{cancelButtonText}}</view>
					<view class='action is-blue' v-if="showConfirmButton == true" @tap.stop='handleConfirm'>{{confirmButtonText}}</view>
				</view>
				<view :class="contentClass">
					<slot></slot>
				</view>
			</view>
		  </view>
		</view>
	</view>
</template>

<script>
/**
 * 自定义弹窗内容组件
 * 使用方法：
 * 		1.引入组件：import simpleModal from '@/components/simple-pro/customModal.vue';
 * 		2.定义：components ，simpleModal 
 * 		3.页面使用：<simpleModal ref="simpleModal">这里面可以写你的自定义内容哟~</simpleModal> 
 * 		4.指定方法 this.$refs.simpleModal.func(); 
 * 		
 * 自定义方法：
 * 		1. alert() ; 支持在方法中传入 object 更改内容  该方法仅弹出一个按钮 （如果传入了object参数 其中的参数值优先级最高）
 * 		2. hide();
 */
	export default {
		props:{
			buttom:{
				// 是否底部弹出 
				type:Boolean,
				default:false
			},
			contentClass:{
				// 弹窗默认样式 
				type:String,
				default:"has-bg-white"
			}
		},
		data() {
			return {
				showConfirmButton:true, // 确认按钮
				showCancelButton:false, // 取消按钮
				confirmButtonText:"确定",// 确定按钮文字
				cancelButtonText:"取消",//取消按钮文字
				isVisibility:false, //是否显示 
			};
		},
		methods:{
			__setconfig:function(options){
				if(options != undefined &&  (typeof options == "object") ){
					if (options['showConfirmButton']!=undefined) this.showConfirmButton = options['showConfirmButton'];
					if (options['showCancelButton']!=undefined) this.showCancelButton = options['showCancelButton'];
					if (options['confirmButtonText']!=undefined) this.confirmButtonText = options['confirmButtonText'];
					if (options['cancelButtonText']!=undefined) this.cancelButtonText = options['cancelButtonText'];
					if (options['isVisibility']!=undefined) this.isVisibility = options['isVisibility'];
					if (options['contentClass']!=undefined) this.contentClass = options['contentClass'];
				}
			},
			show:function(options){
				// 传入 object 参数 动态修改 
				this.__setconfig(options);
				this.isVisibility = true;
			},
			hide:function(){
				this.isVisibility = false;
			},
			handleClose:function() {
				this.isVisibility = false;
				this.$emit('cancelButton');
			},
			handleConfirm:function() {
				this.$emit('confirmButton');
			},
			ClickMaskClose:function(){
				// 点击背景 or 内容时执行关闭  有坑 点击内容的时候也会关闭， 
				this.$emit('maskClose');
			},
			contentClick:function(e){
				console.log("content click")
				this.$emit('contentClick');
			},
			moveHandleStop:function(){
				
			}
		}
	}
</script>

<style>

</style>
